<template>
    <div
            class="monitor body frame_content"
            style="width: 100%; padding-bottom:20px"
    >
        <!-- <table class=" context monitor_top">
            <tbody>
            <tr>
                <td class="tableleft" style="width:20%">是否显示虚假用户信息</td>
                <td>
                    <input type="checkbox" class="falseUser" value="1" v-model="show_robot"/>
                </td>
            </tr>
            </tbody>
        </table> -->
        <div v-for="(lottery, index) in list" :key="index" class="monitorList" style="margin-bottom: 40px">
            <table class="montable" gid="5">
                <thead>
                <tr>
                    <th
                            style="text-align:center; color: blue;"
                            colspan="5"
                            class="topTit"
                    >
                        {{lottery.lottery_name}} 第{{lottery.number}} 期总投注：{{lottery.currentTotalBet}}
                        今日总盈亏：{{lottery.totalProfitAndLossToday}} 第{{lottery.prev_number}}期开奖结果：{{lottery.last_result}}
                        总投注：{{lottery.prevTotalBet}} 总盈亏：{{lottery.lastPeriodTotalProfitAndLoss}}
                        {{complete_time(lottery.close_time,lottery.current_time).complete_text}}
                    </th>
                </tr>
                <tr class="mon_left">
                    <th style="width: 20%">用户名</th>
                    <th style="width: 18%">余额</th>
                    <th style="width: 22%">上期盈亏</th>
                    <th style="width: 22%">当前下注</th>
                    <th style="width: 18%">时间</th>
                </tr>
                <tr v-for="(user_bet,key ) in lottery.userBetList" :key="key" class="mon_left">
                    <th style="width: 20%">{{user_bet.nick_name}}</th>
                    <th style="width: 18%">{{user_bet.user_balance}}</th>
                    <th style="width: 22%">{{user_bet.prevProfitAndLoss}}</th>
                    <th style="width: 22%">{{user_bet.currentBetAmount}} {{user_bet.bet_content}}</th>
                    <th style="width: 18%">{{user_bet.create_time}}</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</template>

<script>
  import { get_monitor } from "@/api/bet_record";
  import { complete_time } from "@/utils/common";

  export default {
    data() {
      return {
        list: [],
        complete_timer: null,//定时器
        show_robot: false,//是否显示机器人
        luyou:""//接受路由参数
      };
    },
    computed: {},
    methods: {
      complete_time(faultDate, completeTime) {
        return complete_time(faultDate, completeTime);
      }
    },
    created() {
      this.complete_timer = setInterval(() => {
        console.log("定时器2");
        get_monitor(this.show_robot,this.luyou).then(res => {
          console.log(res,'res');
          this.list = res.data.data;
        });
      }, 5000);
      this.luyou=this.$route.params.id;
      console.log("创建");//接受路由参数
    },
    beforeDestroy() {
      clearInterval(this.complete_timer);
      this.complete_timer = null;
    },
    mounted() {
      console.log("挂zai");
    }
  };
</script>
<style>
    label,
    select,
    button,
    input[type="button"],
    input[type="reset"],
    input[type="submit"],
    input[type="radio"],
    input[type="checkbox"] {
        cursor: pointer;
    }

    .monitor {
        margin: 0;
        margin-top: 10px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 13px;
        line-height: 20px;
        color: #333;
        background-color: #fff;
    }

    .monitor_top {
        width: 96%;
        margin: auto;
        border: 1px solid #ddd;
        border-collapse: separate;
        border-left: 0;
        border-radius: 4px;
        border-spacing: 0;
    }

    .monitor .monitor_top .tableleft {
        text-align: left;
        padding-left: 5px;
        background-color: #f5f5f5;
    }

    .falseUser {
        margin-left: 6px;
    }

    .monitor .monitor_top td {
        text-align: left;
    }

    .monitorList {
        margin-top: 10px;
    }

    .montable {
        width: 96%;
        margin: auto;
        border: 1px solid #ddd;
        border-collapse: separate;
        border-left: 0;
        border-radius: 4px;
        border-spacing: 0;
    }

    .montable th {
        background-color: #eaeaea;
        border-left: 1px solid #ddd;
        font-weight: bold;
        border-top: 1px solid #ddd;
        padding-top: 8px;
        padding-left: 8px;
        padding-bottom: 4px;
        line-height: 20px;
    }

    .mon_left {
        text-align: left;
    }
</style>
